<template>
	<view class="container">
		<scroll-view @scrolltolower="getNextPageData" class="body">
			<view v-for="(item, index) in list" :key="index" class="item">
				<view class="top flex-row">
					<view class="circle"></view>
					<view class="time">{{ item.addtime }}</view>
				</view>
				<view class="bottom">{{ item.logs }}</view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			id: '',
			page: 1,
			total: 1,
			list: []
		}
	},
	onLoad(option) {
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		this.id = option.id;
		this.getList();
	},
	methods: {
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				method: 'GET',
				url: this.$API.jobTicketLogList,
				data: {
					where: {job_id: this.id}
				},
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.container,
scroll-view{
	height: 100vh;
}
.item{
	margin: 30upx 30upx 0;
}
.item .top{
	font-size: 26upx;
	justify-content: flex-start;
}
.item .top .circle{
	width: 20upx;
	height: 20upx;
	background: #32CB01;
	border-radius: 50%;
	margin: 0 20upx 0 10upx;
	position: relative;
}
.item .top .circle::after{
	content: '';
	width: 32upx;
	height: 32upx;
	border: 2upx solid #32CB01;
	border-radius: 50%;
	position: absolute;
	top: -8upx;
	left: -8upx;
}
.item .top .name{
	margin-left: 10upx;
}
.item .bottom{
	font-size: 28upx;
	line-height: 1.4;
	padding-left: 50upx;
	margin-bottom: 20upx;
}
</style>
